{% extends 'admins/base.html' %}
{% block link %}
    <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">
{% endblock %}
{% block body %}
<section class="content-header">
            <h1>
                友情链接
            </h1>
        </section>
    <!--添加标签-->
        <div class="modal fade bs-example-modal-lg" id="myModallink" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加友链</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" action="{% url 'link' %}" method="post" id="createlink">{% csrf_token %}
                    <div class="form-group">
                    <label class="col-lg-2 control-label" for="name">名称:</label>
                        <div class="col-lg-9">
                            <input type="text" id="name" class="form-control" name="name" placeholder="请输入名称" />
                        </div>
                </div>
                    <div class="form-group">
                    <label class="col-lg-2 control-label" for="urls">URL:</label>
                        <div class="col-lg-9">
                            <input type="text" id="urls" class="form-control" name="urls" placeholder="请输入url" />
                        </div>
                </div>
                    <div class="form-group">
                    <label class="col-lg-2 control-label" for="Description">描述:</label>
                        <div class="col-lg-9">
                            <input type="text" id="Description" class="form-control" name="Description" placeholder="请输入描述" value="此用户没有添加任何描述"/>
                        </div>
                </div>

                    <div class="form-group">
                    <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="createlink" class="btn btn-primary" value  ="submit">提交</button>
              </div>
              </div>
                </form>
              </div>
            </div>
        </div>
        </div>
        <!--弹窗结束-->
        <section class="content">
            <div class="row">
                <section class="content">
                    <div class="row">

                        <div class="col-xs-12">
                            <div class="box">
                                <!-- /.box-header -->
                            <div class="box-header">
                <a href="#myModallink" style="float: right;margin: 0 2px 0 2px;background-color: #f0ad4e;border-color: #eea236;" class="btn btn-sm btn-primary " data-toggle="modal" data-placement="bottom"><span class="glyphicon glyphicon-globe"></span> 添加友链 </a>
            </div>
                                <div class="box-body">
                                    <table id="articleList" class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>名称</th>
                                            <th>描述</th>
                                            <th>URL</th>
                                            <th>添加时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for link in links %}
                                            <tr id="LinkID{{ link.id }}">
                                                <td>{{ link.id }}</td>
                                                <td>
                                                    <span id="LinkDataName{{ link.id }}">{{ link.name }}</span>
                                                    <input id="LinkName{{ link.id }}" style="display: none;width: 100%" value="{{ link.name }}" type="text">
                                                </td>
                                                <td>
                                                    <span id="LinkDataDesc{{ link.id }}">{{ link.description }}</span>
                                                    <input id="LinkDesc{{ link.id }}" style="display: none;width: 100%" value="{{ link.description }}" type="text">
                                                </td>
                                                <td>
                                                    <span id="LinkDataURL{{ link.id }}">{{ link.url }}</span>
                                                    <input id="LinkURL{{ link.id }}" style="display: none;width: 100%" value="{{ link.url }}" type="url">
                                                </td>
                                                <td>{{ link.add_time }}</td>
                                                <td>
                                                    <div id="ModifyDelete{{ link.id }}">
                                                        <button onclick="DeleteLink({{ link.id }})" id="LinkData" type="button" class="btn btn-danger" style="font-size: 12px">删除</button>
                                                    </div>
                                                    <div id="SaveCancel{{ link.id }}" style="display: none">
                                                        <button onclick="SaveLink({{ link.id }})" id="ModifyLink{{ link.id }}" type="button" class="btn btn-primary" style="font-size: 12px">保存</button>
                                                        <button onclick="CancelLink({{ link.id }})" id="DeleteLink{{ link.id }}" type="button" class="btn btn-success" style="font-size: 12px">取消</button>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
{% endblock %}

{% block javascript %}
    <script type="text/javascript">
			$(document).ready(function(){
				$('#links').addClass("active");
		});
    </script>
     <!-- DataTables -->
    <script src="/static/dist/js/jquery.cookie.js"></script>
    <script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script>
    var csrftoken = $.cookie('csrftoken');
	function csrfSafeMethod(method) {
		// these HTTP methods do not require CSRF protection
		return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
	}
	$.ajaxSetup({
		beforeSend: function(xhr, settings) {
			if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
				xhr.setRequestHeader("X-CSRFToken", csrftoken);
			}
		}
	});
        $(function () {
            $("#articleList").DataTable();
        });
    function DeleteLink(id) {
            if(confirm("确认要删除此友链，删除后不可恢复哦？")){
                    $.ajax({
                        url:'{% url 'delink' %}',
                        type:'POST',
                        data:{modify:id},
                        success:function (arg) {
                            window.location.reload();
                        },
                        error:function () {
                            console.log('failed');
                        }
                    });
                }
	}
    </script>
{% endblock %}
